@import "../commons/variables.scss";
@import "../commons/px2rem.scss";

.juheh5-login {
    .account-header {
        border-top-left-radius: px2rem(8);
        border-top-right-radius: px2rem(8);
        height: px2rem(64);
        line-height: px2rem(64);
        text-align: center;
        font-size: px2rem(32);
        color: #d8d8db;
        font-weight: 400;
        padding-top: px2rem(20);

        .back-icon {
            position: absolute;
            top: px2rem(20);
            left: px2rem(30);
            color: #fff;
            cursor: pointer;

            .bi-chevron-left {
                width: px2rem(25);
                height: px2rem(25);
            }
        }
    }

    .account-content {
        width: 85%;
        height: auto;
        margin: px2rem(35) auto;
    }

    .login-header {
        width: 100%;
        height: px2rem(80);
        line-height: px2rem(60);
        box-sizing: border-box;
        margin-top: px2rem(30);
        color: #d8d8db;

        .login-tab {
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            font-size: px2rem(24);
            color: #d8d8db;
            margin: 0 auto;

            .tab-item {
                display: flex;
                text-align: center;
            }

            .tab-item.active {
                font-size: px2rem(26);
                color: #02bfff;
                border-bottom: px2rem(4) solid #02bfff;
            }

            .tab-item:nth-child(2) {
                margin-left: px2rem(85);
            }
        }
    }

    .password-login-box,.phone-login-box {
        width: 100%;

        .password-input-box {
            position: relative;
            width: 100%;

            .password-eye {
                position: absolute;
                width: px2rem(32);
                height: px2rem(32);
                top: px2rem(24);
                left: px2rem(382);
            }

            .bi-eye,
            .bi-eye-close {
                width: px2rem(32);
                height: px2rem(32);
            }
        }

        .pass-retrieve {
            position: relative;
            text-align: right;
            color: #d8d8db;
            font-size: px2rem(18);
            margin-top: -(px2rem(30));
            margin-bottom: px2rem(10);
            cursor: pointer;
        }

        .code-btn {
            width: 40%;
            margin: px2rem(12) 0 px2rem(12) auto;
            background-color: #2d3e50;
            border-radius: px2rem(8);
            box-sizing: border-box;
            height: px2rem(50);
            line-height: px2rem(50);
            text-align: center;
            color: #fff;
            letter-spacing: 1px;
            font-size: px2rem(24);
        }

        .user-agree {
            display: flex;
            color: #72727b;
            font-size: px2rem(20);
            margin: px2rem(15) 0 px2rem(25) 0;
            align-items: center;
            justify-content: center;

            .checkbox {
                margin-right: px2rem(10);
            }

            .info {
                color: #02bfff;
            }

            input[type="checkbox"] {
                width: px2rem(24);
                height: px2rem(24);
            }
        }
    }

    .custom-input {
        width: 100%;
        background-color: #161720;
        margin: px2rem(10) 0;
        border-radius: px2rem(4);
        box-sizing: border-box;
        height: px2rem(65);
        line-height: px2rem(65);
        text-align: left;
        padding: px2rem(8) px2rem(25);
        color: #d8d8db;
        font-size: px2rem(22);
        outline: none;
        border: none;
        caret-color: #d8d8db;
    }

    .large {
        width: 100%;
    }

    .with-eye {
        padding: px2rem(8) px2rem(50) px2rem(8) px2rem(20);
    }

    .reg-type-box {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: px2rem(30);
        margin-top: px2rem(40);
        color: #d8d8db;

        .code-reg-btn {
            flex: 1;

            .code-add-icon {
                margin: 0 auto;
                width: px2rem(42);
                height: px2rem(42);
                margin-bottom: px2rem(5);
            }
        }

        .password-reg-btn {
            flex: 1;
            padding-top: px2rem(30);
            font-size: px2rem(24);
        }

        .fast-reg-btn {
            flex: 1;

            .fast-add-icon {
                margin: 0 auto;
                width: px2rem(42);
                height: px2rem(42);
                margin-bottom: px2rem(5);
            }
        }
    }

    .large-btn {
        width: 100%;
        background-color: #02bfff;
        border-radius: px2rem(4);
        box-sizing: border-box;
        height: px2rem(65);
        line-height: px2rem(65);
        text-align: center;
        color: #000304;
        letter-spacing: 1px;
        font-size: px2rem(26);
    }

    .login-margin {
        margin: px2rem(30) auto;
    }
}
